/* 
	该文件主要用于：
			1.定义：actions、mutations、state
			2.创建一个Vuex中最最最最最核心的人——store
			3.且store要管理：actions、mutations、state
*/
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

//定义一个actions，里面写着一个一个的函数，用于响应组件中的动作
const actions = {
	//下面的这个jia和jian函数，没有存在感，因为它里面没有任何业务逻辑
	/* jia(miniStore,value){
		miniStore.commit('JIA',value)
	},
	jian(miniStore,value){
		miniStore.commit('JIAN',value)
	}, */
	
	//下面的这个jiaOdd函数，有存在感，因为它里面写了一个判断奇偶数的业务逻辑
	jiaOdd(miniStore,value){
		if(miniStore.state.sum % 2){
			miniStore.commit('JIA',value)
		}
	},
	//下面的这个jiaWait函数，有存在感，因为它里面写了一个定时器的业务逻辑
	jiaWait(miniStore,value){
		setTimeout(()=>{
			miniStore.commit('JIA',value)
		},500)
	},
	jiaServer(miniStore){
		//发送网络请求
		axios.get('https://api.uixsj.cn/hitokoto/get?type=soup').then(
			response => {
				//若请求成功，则加，具体加几，看文字的长度
				console.log(response.data)
				//联系mutations中JIA（后厨）去真正完成加
				miniStore.commit('JIA',response.data.length)
			},
			error => {
				alert(error)
			}
		)
	}
}

//定义一个mutations,里面写一个一个的函数，这些函数用于真正去操作state中的数据
//一般我们不会往mutations的函数里，写业务逻辑！！！
const mutations = {
	JIA(state,value){
		state.sum += value
	},
	JIAN(state,value){
		state.sum -= value
	}
}

//定义一个state（用于存储数据）
const state = {
	sum:0,
	description:'一个简单的求和组件，只能加和减'
}

//如果vuex中的数据，要经过一些处理，才展示到页面上，那就可以用getters去进行处理
//当然了，也可以自己在组件中通过：计算属性、自定义指令等等去处理
const getters = {
	bigSum(state){
		return state.sum * 10
	},
	shortDescription(state){
		return state.description.slice(0,3)
	}
}

//创建并暴露一个store并，且管理：actions、mutations、state
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})




